<template>
  <!-- 列表渲染 -->
  <div>
    <div class="box4">
        <template v-for="user in users" >
            <li v-if="!user.isComplete" :key="user.id">
                {{user.id}}----{{user.age}}
            </li>
        </template>
    </div>

    <div class="box3">
        <ul>
            <li v-for="(item,index) in list" :key="item">
                元素:{{item}}-----索引:{{index}}
            </li>
            <button @click="doAdd">添加元素</button> &nbsp;&nbsp;
            <input type="button" value="过滤数组元素" @click="doFilter">
        </ul>

    </div>

   <hr>
    <div class=box2>
        <label for="stuId">id:</label>
        <input type="text" v-model="sid" id="stuId">
        <lable for="stuName">name:</lable>
        <input type="text" v-model="sname" id="stuName">
        <input type="button" value="添加学生信息" @click="add">


        <!-- 循环中key的使用
            1.给vue一个提示，以便他能跟踪到每个节点的身份，从而重用或重新排序现有元素，提高页面渲染的效果
            2.注意：为每项提供一个唯一key属性，不建议使用数组索引 -->
        <p v-for="stu in stus" :key="stu.id">
        <input type="checkbox"> &nbsp;&nbsp; {{stu.id}}----{{stu.name}}
</p>
    </div>

     <div class="box1">
    <!-- 1.遍历普通数组 -->
    <ul>
        <!-- 第二个参数是下标 -->
        <li v-for="(item, idx) in list" :key="item">
            元素 {{item}}----索引 {{idx}}
        </li>

        <li v-for="user in users" :key="user.id">
            id:{{user.id}} --- age:{{user.age}}
        </li>
    </ul>
<!--2.遍历对象数组 -->
    <h1 v-for=" p in person" :key="p">
        {{p}}
    </h1>
    <br>
     <h1 v-for="(p,key) in person" :key="p">
        {{p}}---{{key}}
    </h1>
    <br>
    <h1 v-for="(p,key,index) in person" :key="p">
        属性名：{{p}}---属性值：{{key}}---索引：{{index}}
    </h1>
    <br>
    <h2 v-for="count in 10 " :key="count">
        这是第{{count}}次循环
    </h2>
    

  </div>
  </div>
 
</template>

<script>
export default {
    data(){
        return{
            list:[1,2,3,4,5,6,7],
            users:[
                {id:"zs",age:30},
            {id:"zs",age:20},
            {id:"zs",age:40},
            {id:"zs",age:28}
            ],
            person:{
                id:1,
                name:"购彩",
                gender:"男"
            },
            stus: [
                {id:1,name:"zs"},
                {id:2,name:"kj"},
                {id:3,name:"ll"},
                {id:4,name:"po"},
                {id:5,name:"zm"}
            ],sid:null,
            sname:null
        }
    },methods:{
        add(){
            let stu={
                id:this.sid,
                name:this.sname
            }
            this.stus.push(stu)
        },
        doAdd(){
            //直接对数组更改
            this.list.push("aaa")
        },
        doFilter(){
            //要接收才能改变数组
            this.list=this.list.filter(ele=>ele%2==0)
        }
    }

}
</script>

<style>

</style>